<template>
	<view>
		<template v-if="isShow === false">
			<!-- <view style="width: 750rpx; height: 100rpx; background: white; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: sticky; z-index: 2; top: 0;">
				<image v-if="isBack" @tap="toBack" src="../../../static/return.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
				<view class="searchModel">
					<input @input="onKeyInput" v-model="inputValue" @focus="isFocus" @blur="noFocus" placeholder-style="font-size:30rpx;" placeholder="输入想要查看的编号" />
					<text class="icon iconfont icon-search "></text>
				</view>
			</view> -->
			<!-- 
			<view @touchmove.stop.prevent="moveHandle" v-if="isShowModel" class="menuModel">
				<scroll-view scroll-y="true" class="dataViewBox" v-if="isSearchResultShow">
					<template v-if="isSearch == true">
						<block v-for="(item,index) in searchResult" :key="index">
							<view @tap="chooseCheck(index)" style="border-top: 2rpx solid #EEEEEE; width: 750rpx; height: 80rpx; margin-top: 3rpx; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
								<text style="font-size: 32rpx; margin-left: 20rpx;">{{item.disease_management_id}}</text>
								<image src="../../../static/jiantou1.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
							</view>
						</block>
					</template>
					<template v-else>
						<block>
							<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
								<text style="color: #C0C0C0; font-size: 32rpx;">搜索结果为空</text>
							</view>
						</block>
					</template>
				</scroll-view>
			</view> -->
			<block v-for="(item,index) in middleList" :key="index">
				<view style="margin-bottom: 10rpx; height: auto; width: 710rpx; margin-left: 20rpx;">
					<view class="cu-form-group margin-top" style=" border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;">
						<image src="../../../static/rear/pigstyAndHouse/number.png" style="height: 48rpx; width: 48rpx;" mode="aspectFit"></image>
						<text style="width:40%; margin-left: -40rpx; font-size: 32rpx; font-weight: bold; ">用药编号：{{item.medication_id}}</text>
						<!-- <text @click="redact(item)">编辑</text> -->
					</view>
					<view class="cu-form-group">
						<view class="title">畜牧编号</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.livestock_id}}</text>
					</view>
					<view class="cu-form-group">
						<view class="title">药品名字</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_name}}</text>
					</view>
					
					<view class="cu-form-group">
						<view class="title">使用方式</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_mode}}</text>
					</view>
					<view class="cu-form-group">
						<view class="title">使用数量</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_quantity}}</text>
					</view>
					
					<view class="cu-form-group">
						<view class="title">兽药用药时间</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_modification_time}}</text>
					</view>
					
					<view class="cu-form-group">
						<view class="title">使用人员</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_personnel}}</text>
					</view>
					<view class="cu-form-group" style="border-bottom-left-radius: 40rpx; border-bottom-right-radius: 40rpx;">
						<view class="title">联系方式</view>
						<text style="font-size: 30rpx; color: #7F7F7F;">{{item.medication_information}}</text>
					</view>
				</view>
			</block>
			<view class="load-more">{{loadtext}}</view>
		</template>
		<template v-else>
			<xw-empty :isShow="isShow" text="暂无疾病防治信息" textColor="#777777"></xw-empty>
		</template>
	</view>
</template>

<script>
	import xwEmpty from '../../../components/xw-empty/xw-empty.vue'
	export default{
		components:{
			xwEmpty
		},
		data () {
			return{
				inputValue: '',
				number: '',
				loadtext:"上拉加载更多",
				pagenum:1,
				isShowModel:false,
				isSearchResultShow: false,
				isSearch: false,
				isBack: false,
				step: 0,
				//关键词搜索出来的结果列表
				searchResult:[],
				//中间列表
				middleList: [],
				isBottom: false,
				
				drugsList: [],
				isShow: false,
				person: '',
				farmId: '',
				person:''
			}
		},
		//监听触底事件
		onReachBottom(){
			console.log(11)
			this.loadmore()
		},
		onNavigationBarButtonTap() {
			this.toKunCun();
		},
		onReady() {
				this.init();
				this.getRole();
		},
		methods:{
			//查看库存
			toKunCun(){
				uni.navigateTo({
					url:"./kucun"
				})
			},
			//修改用药记录
			redact(item){
				// console.log(item)
				uni.navigateTo({
					url:"./drugsUpdate"
				})
				uni.$emit("drugsItem",item)
			},
			//获取用户角色
			getRole(){
				this.person = this.User.userRight.name
				console.log(this.person)
				if(this.person==='government'){
					// #ifdef APP-PLUS
					var webView = this.$mp.page.$getAppWebview();
					// 修改buttons 
					webView.setTitleNViewButtonStyle(0, {
					width: '0',
					});
					// #endif
				}
			},
			loadmore(){
			   if(this.loadtext!="上拉加载更多"){ return;}
			   this.loadtext="加载中...";	
			   this.pagenum++;
			   setTimeout(() => {
				uni.request({
					url:this.confige.webUrl+'/livestock/findMedicationList',
					data:{
						farmId: this.farmId,
						limits:7,
						pages:this.pagenum
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						console.log(res)
						if(!this.User.errToken(res.data.code)){
							return;
						} 
						 if(res.data.code==200){
							 this.isShow = false
							 let list = res.data.result[0].list
							 this.middleList.push(...list) ;
							this.loadtext="上拉加载更多"
						 }
						 else{
						 	this.loadtext="没有更多啦"
						     }
					 }	
					}	  
				)}, 1000);
			},
			//疾病防治药品管理
			init () {
				this.loadtext="上拉加载更多"
				this.middleList="";
				uni.request({
					url:this.confige.webUrl+'/livestock/findMedicationList',
					data:{
						farmId: this.farmId,
						limits:7,
						pages:1
					},
					header:{
						"X-Token":this.User.token
					},
					success: (res) => {
						if(res.data.code==200) {
							this.isShow = false
							this.drugsList = res.data.result[0].list
							this.middleList = this.drugsList;
							if(this.middleList.length>6){
								this.loadtext ="上拉加载更多";
							}
							else{
								this.loadtext ="没有更多了";
							}
							// console.log(this.middleList)
						}else{
							this.isShow = true
						}
						
					}
				})
			},
			
			//input里的@input监听输入
			// onKeyInput: function(event) {
			// 	this.searchResult = []
			// 		if(event.target.value == ''){
			// 			this.isSearchResultShow == false
			// 			this.isSearch = false
			// 			this.isShowModel = false
			// 		}else{
			// 			this.isShowModel = true
			// 			this.isSearchResultShow = true
			// 			for(let i = 0; i<this.drugsList.length; i++){
			// 				this.number = this.drugsList[i].disease_management_id.toString().indexOf(event.target.value)
			// 				if(this.number >= 0) {
			// 					this.searchResult.push(this.drugsList[i])
			// 				}
			// 			}
						
			// 			if(this.searchResult.length > 0) {
			// 				this.isSearch = true
			// 			}else{
			// 				this.isSearch = false
			// 			}
			// 		}
			// },
			
			// isFocus: function(event) {
			// 	if(event.target.value == ''){
			// 		this.isSearchResultShow = false
			// 	}else{
			// 		this.isShowModel = true
			// 		this.isSearchResultShow = true
			// 		if(this.searchResult.length > 0) {
			// 			this.isSearch = true
			// 		}else{
			// 			this.isSearch = false
			// 		}	
			// 	}
					
			// },
			
			// noFocus: function(event) {
			// 	setTimeout(() => {
			// 		this.isSearchResultShow = false
			// 		this.isShowModel = false
			// 	},200)
			// },
			
			// chooseCheck: function(index) {
			// 	//console.log(index)
			// 	this.inputValue = this.searchResult[index].disease_management_id
			// 	this.isBack = true
			// 	this.middleList = []
			// 	this.middleList.push(this.searchResult[index])
			// 	this.step = 1
			// 	this.isBottom = false
			// },
			
			// toBack() {
			// 	this.middleList = []
			// 	this.isBack = false
			// 	this.inputValue = ''
			// 	this.searchResult = []
			// 	this.isSearch = false
			// 	this.step = 0
			// },
		},
		onLoad(option) {
			this.getRole()
			if(this.person === 'government'){
				this.farmId = option.farmId
			}else{
				this.farmId = this.User.userInfo.farm_id
			}
		},
		
		
		//监听下拉刷新
		onPullDownRefresh() {
			this.wareHouseList = []
			setTimeout(() => {
				this.toBack()
				uni.stopPullDownRefresh()
			},1000)
		},
	}
</script>

<style lang="less">
	@import '../../../common/animate.css';
	@import '../../../common/main.css';
	@import "../../../common/iconfont.css";
	
	page { background: #f8f8f8;}
	.load-more {
		text-align: center;
		color: #AAAAAA;
		font-size: 30upx;
		padding-top: 10upx;
		padding-bottom: 10upx;
	}
	.menuModel{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100vh;
		height: 100vh;
		background-color: rgba(0,0,0,0.2);
		// position: relative;
		.menu{
			z-index: 2;
			position: fixed;
			top:4rpx;
			right:18rpx;
			width: 402rpx;
			height: 344rpx;
			background-image: url(../../../static/qipa.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	
	.searchModel{
		width: 80%;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: center;
		padding:5rpx;
		height: 60rpx;
		border: 2rpx solid #4AC997;
		border-radius: 60rpx;
		color: #717171;
		>input{ width: 85%;}
		>text{font-size: 35rpx;}
	}
	
	.dataViewBox {
		position: fixed;
		z-index: 2;
		top: 100rpx;
		width: 750rpx;
		background: white;
		min-height: 100rpx;
		max-height: 600rpx;
		display: flex;
		flex-direction: column;
		//flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: space-around;
		border-bottom: 1rpx solid #dfdfdf;
	}
	
	.bottomNone {
		width: 750rpx;
		height: 100rpx;
		margin-top: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		background: #F2F2F2;
		color: #BBBBBB;
	}
</style>
